const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')

module.exports = {
  // 模式
  mode: 'development',
  // 入口
  entry: {
    base: './src/pages/base.js',
    login: './src/pages/login/index.js',
    userAdd: './src/pages/userAdd/index.js',
    users: './src/pages/users/index.js',
    userUpdate: './src/pages/userUpdate/index.js',
  },

  // 出口
  output: {
    path: path.resolve(__dirname, 'dist'), // 打包的根目录
    filename: 'js/[name]-[contenthash:7].js',  // 打包生成的js文件
    clean: true, // 自动清除旧的打包文件
  },

  // 插件
  plugins: [
    new HtmlPlugin({
      template: './src/pages/index/index.html',
      filename: 'index.html',
      chunks: [], // 不引入任何打包的js
      inject: 'body'
    }),
    new HtmlPlugin({
      template: './src/pages/login/index.html',
      filename: 'login.html',
      chunks: ['base', 'login'],
      inject: 'body'
    }),
    new HtmlPlugin({
      template: './src/pages/userAdd/index.html',
      filename: 'userAdd.html',
      chunks: ['base', 'userAdd'],
      inject: 'body'
    }),
    new HtmlPlugin({
      template: './src/pages/users/index.html',
      filename: 'users.html',
      chunks: ['base', 'users'],
      inject: 'body'
    }),
    new HtmlPlugin({
      template: './src/pages/userUpdate/index.html',
      filename: 'userUpdate.html',
      chunks: ['base', 'userUpdate'],
      inject: 'body'
    }),
  ],

  // 模块加载器
  module: {
    rules: [
      // 处理js  ES6 => ES5
      {
        test: /\.js$/,
        exclude: /node_modules/, // 不进行处理的文件夹
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              [
                '@babel/preset-env',
                {
                  useBuiltIns: 'usage', // 只打包使用的ES6新API的实现代码
                  corejs: { version: 2 } // 指定core-js的版本号为2
                }
              ]
            ],
            plugins: [], // 指定babel插件包
          }
        }
      },
      // 处理CSS
      {
        test: /\.css$/,  // 配置css文件的正则
        // 1. 每个loader就是一个处理函数
        // 2. 多个loader, 从下向上依次执行
        use: [
          'style-loader', // js文件 => 页面的style标签
          'css-loader'  // css文件 => js文件
        ]
      },
      // 处理art
      {
        test: /\.art$/,
        loader: "art-template-loader",
      },
    ]
  },

  // 开发服务器
  devServer: {
    port: 4000,
    open: true,
    proxy: { // 以/api开头的请求, 都由代理服务器转发到接口服务器
      // "/api": "http://localhost:8082"
      "/api": { // 处理以/api开头的请求
        target: "http://localhost:8082", // 转发的目标接口基础地址
        pathRewrite: { // 在转发请求时去掉 /api
          "^/api" : ""
        }
      }
    },

    
  }
}